<template>
            <div class="subject-resource-table">
          <img src="@/assets/images/subject-resource-table-title.png" alt="" />
          <div ref="chartRef" style="width: 100%; height: 86.16%;"></div>
        </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import {getSubjectuse} from "@/api/api.js";




// 创建对 DOM 元素的引用
const chartRef = ref(null);
const subjectuseName = ref([])
const subjectuseTotle = ref([])
let option

onMounted(() => {
  getSubjectuse().then((res)=>{
    res.data.forEach(element => {
      subjectuseName.value.push(element.name)
      subjectuseTotle.value.push(element.total)
    });
    console.log(subjectuseName.value);
    console.log(subjectuseTotle.value);
    myChart.setOption({
    xAxis: {
    type: 'category',
    data: subjectuseName.value,
    axisLine: {
      lineStyle: {
        color: 'rgba(0, 0, 0, 0)' // 设置 X 轴轴线的颜色为红色
      }
    },
    axisLabel: {
      textStyle: {
        color: 'rgb(255, 255, 255)' // 设置 X 轴标签的字体
      },
      interval: 0,
      formatter: function(value) {
        let res = ""; // 拼接加\n返回的类目项
        let maxLength = 2; // 每项显示文字个数，这里设置为2表示每两个字换一行
        let valLength = value.length; // X轴上的文字个数
        let rowN = Math.ceil(valLength / maxLength); // 需要换行的行数
        if (rowN > 1) {
          for (let i = 0; i < rowN; i++) {
            let temp = ""; // 每次截取的字符串
            let start = i * maxLength; // 开始截取的位置
            let end = start + maxLength; // 结束截取的位置
            temp = value.substring(start, end) + "\n";
            res += temp; // 拼接字符串
          }
          return res;
        } else {
          return value;
        }
      },
    },
  },
  
  yAxis: {
    show:false
    // type: 'value'
  },
  series: [
    {
      type: 'bar',
      barWidth:'48.28%',
      data: subjectuseTotle.value,

      label: {
        show: true, // 显示标签
        position: 'top', // 标签位置在柱子顶部
        textStyle: {
          color: '#ffffff' // 设置标签的字体颜色
        }
        // formatter: '{value}' // 标签内容格式化为当前柱子的值
      },
      itemStyle: {
        color: {
          type: 'linear', // 渐变类型，'linear' 表示线性渐变
          x: 0, // 渐变起始点的 x 坐标
          y: 0, // 渐变起始点的 y 坐标
          x2: 0, // 渐变结束点的 x 坐标
          y2: 1, // 渐变结束点的 y 坐标
          colorStops: [ // 渐变颜色的停靠点
            { offset: 0, color: 'rgb(24, 254, 240) ' }, // 渐变起始颜色
            { offset: 1, color: 'rgba(8, 189, 255, 0)' } // 渐变结束颜色
          ],
          global: false // 默认为 false，表示渐变色只在当前柱子上生效
        }
      }
    }
  ]
  })

  })
  // 在 DOM 挂载后初始化 ECharts
  const myChart = echarts.init(chartRef.value);


  // 设置图表的配置项和数据
   option = {
    grid: {
    left: '-2.97%', // 距离容器左边的距离
    right: '5.97%', // 距离容器右边的距离
    top: '8.09%', // 距离容器顶部的距离
    bottom: '4.71%', // 距离容器底部的距离
    containLabel: true // 是否包含坐标轴刻度标签
  },
  xAxis: {
    type: 'category',
    data: subjectuseName.value,
    axisLine: {
      lineStyle: {
        color: 'rgba(0, 0, 0, 0)' // 设置 X 轴轴线的颜色为红色
      }
    },
    axisLabel: {
      textStyle: {
        color: 'rgb(255, 255, 255)' // 设置 X 轴标签的字体
      },
      interval: 0,
      formatter: function(value) {
        let res = ""; // 拼接加\n返回的类目项
        let maxLength = 2; // 每项显示文字个数，这里设置为2表示每两个字换一行
        let valLength = value.length; // X轴上的文字个数
        let rowN = Math.ceil(valLength / maxLength); // 需要换行的行数
        if (rowN > 1) {
          for (let i = 0; i < rowN; i++) {
            let temp = ""; // 每次截取的字符串
            let start = i * maxLength; // 开始截取的位置
            let end = start + maxLength; // 结束截取的位置
            temp = value.substring(start, end) + "\n";
            res += temp; // 拼接字符串
          }
          return res;
        } else {
          return value;
        }
      },
    },
  },
  
  yAxis: {
    show:false
    // type: 'value'
  },
  series: [
    {
      type: 'bar',
      barWidth:'48.28%',
      data: subjectuseTotle.value,

      label: {
        show: true, // 显示标签
        position: 'top', // 标签位置在柱子顶部
        textStyle: {
          color: '#ffffff' // 设置标签的字体颜色
        }
        // formatter: '{value}' // 标签内容格式化为当前柱子的值
      },
      itemStyle: {
        color: {
          type: 'linear', // 渐变类型，'linear' 表示线性渐变
          x: 0, // 渐变起始点的 x 坐标
          y: 0, // 渐变起始点的 y 坐标
          x2: 0, // 渐变结束点的 x 坐标
          y2: 1, // 渐变结束点的 y 坐标
          colorStops: [ // 渐变颜色的停靠点
            { offset: 0, color: 'rgb(24, 254, 240) ' }, // 渐变起始颜色
            { offset: 1, color: 'rgba(8, 189, 255, 0)' } // 渐变结束颜色
          ],
          global: false // 默认为 false，表示渐变色只在当前柱子上生效
        }
      }
    }
  ]

};

  // 使用配置项和数据显示图表
  myChart.setOption(option);
});

</script>

<style lang="scss" scoped>
  .subject-resource-table {
    width: 48.62%;
    height: 100%;
    background: url("@/assets/images/3D-bg.png");
    background-size: 100% 100%;
    // background-color: rgba(20, 30, 43, 0.63);
    backdrop-filter: blur(5px); /* 创建毛玻璃效果 */
    > img {
      width: 100%;
    }
  }
</style>